<template>
	<div>
		<div class="publish-top">
			
		</div>
		<div class="register-content">
			<h1>用户注册</h1>
			<ul class=" login-list">
				<li>
					<img src="../../assets/images/home/user.png"/>
					<input type="text" name="" id="" value="" placeholder="用户手机号" @change="changePhone"/>
				</li>
				<li>
					<img src="../../assets/images/home/out.png"/>
					<input type="text" name="" id="" value="" placeholder="输入验证码" @change="changeOut"/>
					<p @click="handleOut">{{getAuthCodeText}}</p>
				</li>
				<li>
					<img src="../../assets/images/home/password.png"/>
					<input type="password" name="" id="" value="" placeholder="设置密码(6-18位)" @change="changePass"/>
				</li>
				<li>
					<img src="../../assets/images/home/password.png"/>
					<input type="password" name="" id="" value="" placeholder="重复密码" @change="changePass2"/>
				</li>
			</ul>
			
			<div class="login" @click="handleRegister">注册</div>
			<div class="register" @click="handleLo">登录</div>
			<div class="agreement" @click="handlePic">
				<img :src="pic"/>
				<span class="">阅读并同意</span>
				<span class="color" @click.stop="onAgreem">《圈子社区用户注册协议》</span>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import yes from '../../assets/images/home/yes.png';
	import not from '../../assets/images/home/not.png'
	import user from '../../utils/isLogin';
	import qs from 'qs';
	export default{
		data(){
			return{
				phone: '',
				code:'',
				password1:'',
				password2 :'',
				getAuthCodeText:'获取验证码',
				isDisabled: true,
				pic:yes,
				onoff:true,
				isClick:true
			}
		},
		created(){
			
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }
		},
		components:{
			
		},
		methods:{
			onAgreem(){
				if(this.isClick){
					this.isClick = false;
					var agreement = plus.webview.create('agreement.html','agreement',{scrollIndicator:'none'},{});
					agreement.addEventListener("loaded", ()=> {
					   agreement.show('pop-in', 300);
					   this.isClick = true;
					   agreement = null;
					}, false);
				}
			},
			handlePic (){
				if(this.onoff == true){
					this.pic = yes;
					this.onoff = false;
				}else{
					this.pic = not;
					this.onoff = true;
				}
			},
			handleBack(){
				var register=plus.webview.getWebviewById('register');
				plus.webview.close(register);
			},
			handleLo (){
				var register=plus.webview.getWebviewById('register');
				plus.webview.close(register);
			},
			changePhone (e){
				this.phone = e.target.value;
			},
			changeOut (e){
				this.code = e.target.value;
			},
			handleOut (){
				if(this.isClick){
					this.isClick = false;
					let phone = this.phone;
					let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
					if(!myreg.test(phone) || phone == ''){
						plus.nativeUI.toast('手机号格式错误,请重新输入~')
						return
					}
		        	var count = 60;
		        	let daoTime = setInterval(() => {
		            count--; 
	           		this.getAuthCodeText = count + '(s)';
	               this.isDisabled = false; 
		            if (count === 0) {
	                    this.getAuthCodeText = '获取验证码';
	                    this.isDisabled = true;
		               
		                window.clearInterval(daoTime);
		            }
		        	}, 1000);
					axios.post( user.src + '/index/user/get_register_verify' , {
						mobile : phone
					})
					.then((res)=> {
						if(res.data.status = 200){
							this.isClick = true;
						}
					})
					.catch((error)=> {
					    console.log(error);
					});
				}
				
			},
			changePass (e){
				this.password1 = e.target.value;
			},
			changePass2 (e){
				this.password2 = e.target.value;
			},
			
			handleRegister () {
				let phone = this.phone;
				let code = this.code;
				let pass = this.password1;
				let pass2 = this.password2;
				let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
				if(!myreg.test(phone) || phone == ''){
					plus.nativeUI.toast('手机号格式错误,请重新输入~');
					return
				}
				if(code == ''){
					plus.nativeUI.toast('验证码不能为空~');
					return;
				};
				if(pass == '' || pass2 == ''){
					plus.nativeUI.toast('密码不能为空~');
					return;
				}
				if(pass.length < 6){
					plus.nativeUI.toast('密码不能低于6位~');
					return;
				}
				if(!this.onoff){
					plus.nativeUI.toast('请勾选注册协议~');
					return;
				}
				
				var client_info = plus.push.getClientInfo();

				var data = qs.stringify({
					mobile : phone,
					password : pass,
					confirm_password : pass2,
					verify : code,
				})

				axios({
					method: 'post',
					url: user.src + '/index/user/user_registration',
					data: data
				})
				.then((res)=> {
					if(res.data.status == 1016){
						plus.nativeUI.toast('该账号已注册~');
						return;
					}
					if(res.data.status == 1017){
						plus.nativeUI.toast('验证码不正确~');
						return;
					}
					if(res.data.status == 1018){
						plus.nativeUI.toast('输入密码不一致~');
						return;
					}
					if(res.data.status == 200){
						plus.nativeUI.toast('注册成功');
						plus.webview.getWebviewById('mine').reload();
						var register=plus.webview.getWebviewById('register');
						plus.webview.close(register);
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
				
			}
		}
	}

</script>

<style lang='less' scoped>

html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #fff;

	}

	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		width: 100%;
		height: 60px;
		padding-top: 70px;
		display:flex;				
		.left-icon{
			width: 90px;
			
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			width: 80%;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.register-content{
		width: 100%;
		
		
		h1{
			padding-left: 70px;
			line-height: 160px;
			font-size: 45px;
			color: #333333;
		}
		ul{
			padding: 0 70px;
			margin-bottom: 70px;
			li{
				position: relative;
				/*margin-bottom: 24px;*/
				padding: 30px 0;
				height: 86px;
				border-bottom: 1px solid #cccccc;
				overflow: hidden;
				display: flex;
				align-items: center;
				img{
					/*float: left;*/
					margin-right: 28px;
					width: 40px;
					height: 45px;
				}
				input{
					display: block;
					/*float: left;*/
					width: 100%;
					font-size: 26px;
					color: #999999;
					height: 90px;
					border: none;
					outline: none;
				}
				p{
					z-index: 1;
					position: absolute;
					top: center;
					right: 0;
					/*float: right;*/
					display: block;
					font-size: 24px;
					color: #4581c9;
					text-align: right;
				}
			}
		}
		
		.login{
			margin: 0 auto 15px;
			width: 615px;
			height: 100px;
			line-height: 100px;
			font-size: 31px;
			font-weight: bold;
			color: #fff;
			background: #00a2ff;
			border-radius: 48px;
			text-align: center;
		}
		.register{
			width: 100%;
			height: 60px;
			font-size: 31px;
			color: #333333;
			text-align: center;
		}
		.agreement{
			padding: 60px 0 0 126px;
			display: flex;
			
			img{
				width: 28px;
				height: 28px;
			}
			
			span{
				display: block;
				margin: 0 10px;
				font-size: 24px;
				color: #666;
			}
			.color{
				color: #20aeff;
			}
		}
	}
</style>